/* 
  增删改查  -  crud 增加(Create)、读取(Read)、更新(Update)和删除(Delete)
  1 查询 
    1 定义一个函数
    2 发送请求 获取数据 渲染页面

  2 增加
    1 弹出和关闭 模态框 （2种方式）
      1 通过给标签增加属性即可 
        1 显示 data-bs-toggle="modal" data-bs-target="#addModal" 和 真实的模态框div的id 联系 
        2 隐藏 data-bs-dismiss="modal"
      2 通过 调用js代码来实现  版本是5的
        1 $("模态框的选择器").modal("show")
        2 $("模态框的选择器").modal("hide")

    2 初始化 模态框中 省市区 三个组件 （和早上讲额外作业业务很类似 ）
      1 初始化 组件函数
        1 发送请求拿数据 完成 组件的渲染 
      2 给省绑定change 事件触发了获取对应市 
      3 给市绑定change 事件触发了获取对应县
    3 给表单绑定提交事件
      1 获取表单，绑定事件
      2 阻止默认行为
      3 使用技巧 快速获取表单数据
      4 合法性校验 - 非空即可 
      5 调用接口 完成新增
      6 提示用户 恭喜用户
      7 关闭模态框
      8 刷新数据
      9 清空新增表单 
  3 编辑
    1 直接点击 修改按钮
    2 弹出 模态框 
    3 标题 -> 修改学员信息
    4 表单显示 待编辑的数据
      1 在生成 修改标签的时候，存一个 数据的 id 上去 
      2 在事件触发的时候获取id 
      3 调用接口 获取待编辑的id 对应 学员信息 obj 
      4 把obj 数据  设置到对应 表单标签中 
    5 点击 确认修改 按钮
      。。。。     

 */

const tbody = document.querySelector('tbody');
// 获取省市区下拉框
const province = document.querySelector('select[name=province]');
const city = document.querySelector('select[name=city]');
const county = document.querySelector('select[name=county]');
const form = document.querySelector('.add-form');
// 获取 添加按钮
const addBtn = document.querySelector('.add-btn');
// 定义一个全局变量id 表示修改的id
// let id;
/*  1 发送请求拿数据 完成 组件的渲染 
 */
// 封装函数发送请求 查询数据
async function getData() {
    const result = await axios({
        url: '/student/list',
    })
    // console.log(result);
    const html = result.data.data.reduce((s, v) => {
        //解构
        const { id, name, age, sex, group, phone, salary, truesalary, province, city, county, } = v
        return s + `<tr>
        <th scope="row">${id}</th>
        <td>${name}</td>
        <td>${age}</td>
        <td>${sex}</td>
        <td>${group}</td>
        <td>${phone}</td>
        <td>${salary}</td>
        <td>${truesalary}</td>
        <td>${province + city + county}</td>
        <td>
          <button type= "button" class="btn btn-primary btn-sm update-btn" data-id="${id}">修改</button>
          <button type="button" class="btn btn-danger btn-sm delete-btn" data-id="${id}">删除</button>
        </td>
      </tr>`
    }, '')
    tbody.innerHTML = html
}
getData()

/*  2 给省绑定change 事件触发了获取对应市 
      3 给市绑定change 事件触发了获取对应县
       */
// 初始化 省市区的函数
async function initSelect() {
    // 操作省
    // const result = await axios({
    //     url: '/geo/province',
    // })
    // console.log(result);
    // const html = result.data.reduce((s, v) => {
    //     return s + `<option value="${v}">${v}</option>`
    // }, '<option value="">--省--</option>')
    // province.innerHTML = html
    // 获取省的数据
    renderSelect("/geo/province", {}, province, "省")

    // 给 省绑定change 事件
    province.addEventListener("change", async function (e) {
        // province.value
        // const result = await axios({
        //     url: "/geo/city",
        //     params: { pname: province.value }
        // })
        // const html = result.data.reduce((s, v) => {
        //     return s + `<option value="${v}">${v}</option>`
        // }, '<option value="">--市--</option>')
        // city.innerHTML = html
        // 获取市的数据
        renderSelect("/geo/city", { pname: province.value }, city, "市")
    })
    // 给 市绑定change 事件
    city.addEventListener("change", async function (e) {
        // province.value  city.value
        // const result = await axios({
        //     url: "/geo/county",
        //     params: { pname: province.value, cname: city.value }
        // })
        // const html = result.data.reduce((s, v) => {
        //     return s + `<option value="${v}">${v}</option>`
        // }, '<option value="">--县--</option>')
        // county.innerHTML = html
        // 获取区的数据
        renderSelect("/geo/county", { pname: province.value, cname: city.value }, county, "区")

    })
}
initSelect()


// 封装函数  发请求 获取省市区数据
async function renderSelect(url, params, dom, label) {
    const result = await axios({
        url,
        params
    })
    const html = result.data.reduce((s, v) => {
        return s + `<option value="${v}">${v}</option>`
    }, `<option value="">--${label}--</option>`)
    dom.innerHTML = html
}

/* 3 给表单绑定提交事件
      1 获取表单，绑定事件
      2 阻止默认行为
      3 使用技巧 快速获取表单数据
      4 合法性校验 - 非空即可  */
// 给表单提交事件
form.addEventListener("submit", async function (e) {
    // console.log(123);
    e.preventDefault()
    // 快速获取表单数据
    // 1 jquery 返回数据 字符串 a=1&b=&c=3
    // 2 form-serialize   a=1&b=2&c=3   === {a:1,b:'',c:3}   if(obj.b)
    // 3 formdata  需要自己去处理

    // 表单验证
    const data = serialize(form, { hash: true, empty: true }) // hash 获取对象  empty 空的字段也会被获取到
    // 对对象做遍历，判断里面的值，如果有发现一个 为 空，就不再往下执行了，弹出提示框给用户
    const formTitle = document.querySelector("#addModalLabel").innerHTML;
    if (formTitle === "添加新学员") {
        // 添加新成员时数据检查
        for (const key in data) {
            if (!data[key]) {
                // 不合法
                toastr.error('请检查你的字段', '提示')
                // 终止 整个 提交事件的执行
                return
            }
        }
    }
    console.log(data);


    // 调接口前，判断当前是新增还是编辑
    // const formTitle = document.querySelector("#addModalLabel").innerText;
    let result;
    console.log(formTitle);
    if (formTitle === "添加新成员") {
        delete data.id
        // 调用接口，完成新增
        // 新增学员不需要id,所以删除id即可
        // delete data.id
        result = await axios({ url: "/student/add", method: "post", data });
        console.log(171, result);//有问题
    } else if (formTitle === "修改成员") {
        // 修改要多一个id属性
        // console.log(id);
        // return;
        // data.id = id;
        result = await axios({ url: "/student/update", method: "put", data });
    }

    // 调用接口
    // const result = await axios({
    //     url: '/student/add',
    //     method: "post",
    //     data
    // })
    if (result.data.code === 0) {
        toastr.success(result.data.message, "恭喜");
        $("#addModal").modal("hide");
        getData()
        form.reset() // 重置 清空表单  dom.value=""
        // 下拉列表需要手动重置
        city.innerHTML = city.firstChild.outerHTML;
        county.innerHTML = county.firstChild.outerHTML;

    }

})
// 点击修改弹出模态框
// 获取添加按钮
// 给编辑按钮绑定事件 事件委托
// 给删除按钮绑定点击事件 事件委托
tbody.addEventListener("click", async function (e) {
    // 获取被点击的真正元素
    const target = e.target
    // 判断点击的是不是编辑按钮
    if (target.classList.contains('update-btn')) {
        $("#addModal").modal("show");
        document.querySelector('#addModalLabel').innerHTML = '修改成员';
        // 获取身上的id属性
        let id = target.dataset.id;
        // 根据id获取对应的学员数据
        const result = await axios({
            url: '/student/one',
            params: { id },
        })
        console.log(result);
        // 获取数据
        const obj = result.data.data;

        //调用city.value的时候 city里面没有对应的option，所以 提前给city和county初始化
        await renderSelect("/geo/city", { pname: obj.province }, city, "市")
        await renderSelect("/geo/county", { pname: obj.province, cname: obj.city }, county, "县")

        // debugger
        // 遍历，挨个给表单赋值
        for (const key in obj) {
            const formEle = document.querySelector(`[name=${key}]`);
            // formEle 不一定存在，所以需要先判断存在，然后再去使用
            // 单选框，应该是设置 checked属性，而不是 value属性
            if (formEle && key !== "sex") {
                // 调用city.value的时候 city里面没有对应的option.
                formEle.value = obj[key];
            }
        }
        // 单独去设置 性别的选中 在html中写死了sex表单的checked属性是男。
        // 找到性别单选框 同时  value 和 obj.sex 相同
        document.querySelector(`[name=sex][value=${obj.sex}]`).checked = true;
    } else if (target.classList.contains('delete-btn')) {
        if (confirm("您确定删除吗？")) {
            // 获取id
            const id = target.dataset.id
            // 发送请求
            const result = await axios({
                url: '/student/delete',
                method: 'delete',
                params: { id },
            })
            if (result.data.code === 0) { }
            toastr.success("删除成功", "提示")
            getData()
        }
    }
})

// 添加按钮点击
addBtn.addEventListener("click", function () {
    // console.log(11);
    $("#addModal").modal("show");
    document.querySelector('#addModalLabel').innerHTML = '添加新成员';
})
// console.dir(city.firstChild);